<template>
	<view class="all">
		<view class="address" v-if="addList.length">
			<view class="address-over">
				<view class="addres">
					<view class="add_adress_info" @tap.stop="edit(item)" v-for="(item,index) in addList" :key="index">
						<view class="add_adress_info_vi">
							<view class="name"><text class="default" v-if="item.status">默认</text><text class="text_name">{{item.name}} </text>
								{{item.mobile}}</view>
							<view class="detail">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
						</view>
						<view class="icon_edit" @tap.stop="editNav(item)">
							<image :src="Url+'add_images/edit_add.png'" mode="widthFix"></image>
							<!-- <i class="icon">&#xe621;</i></view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="add_adress" @tap="addaddress">
				<view class="add_adress_add">
					<i class="icon">&#xe626;</i>
					新建地址
				</view>
			</view>
		</view>
		<sc-no v-else :noStatus="true" @navtive="navtive" url="add_images/sc-noaddress.png" nofont="暂无收货地址" noBtn="添加地址"></sc-no>
		<shop-loading v-if="shopLoad"></shop-loading>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/common/index.js';
	export default {
		data() {
			return {
				Url: this.Imgurl,
				screenHeight: 0,
				addList: [],
				shopLoad:true
			};
		},
		onShow() {
			this.addressList()
		},
		mounted() {
			// let that = this;
			// this.$nextTick(function(){
			// 	uni.getSystemInfo({
			// 	    success: function (res) {
			// 			that.screenHeight = res.windowHeight -105
			// 	    }
			// 	});
			// })
		},
		methods: {
			navtive(){
				uni.navigateTo({
					url: '/pageD/adress/addAdress'
				});
			},
			editNav(item) {
				uni.navigateTo({
				   url:'./editadress?id='+item.id
				})
			},
			addressList() {
				this.shopLoad = true;
				addressList().then(res => {
					if (res.code == 1) {
						this.shopLoad = false;
						this.addList = res.msg;
					} else {
						this.shopLoad = false;
						this.toast(res.msg)
					}
				}).catch()
			},
			addaddress() {
				uni.navigateTo({
					url: '/pageD/adress/addAdress'
				});
			},
			returnOrder() {
				uni.redirectTo({
					url: '/pageB/order/confirmorder'
				});
			},
			edit(item) {
				let pages = getCurrentPages();

				// #ifdef MP-WEIXIN || APP-PLUS
				let currPage = pages[pages.length - 1].$vm;
				let prevPage = pages[pages.length - 2].$vm; //上一个页面
				let router = prevPage.__route__;
				// #endif

				// #ifdef H5
				let currPage = pages[pages.length - 1];
				let prevPage = pages[pages.length - 2]; //上一个页面
				let router = prevPage.route;
				// #endif
				prevPage.address = item;
				if(router == 'pageB/order/confirmorder'){
					uni.navigateBack({
						delta: 1
					});
				}
				// var content = JSON.stringify(item)
				// uni.navigateTo({
				// 	url: '/pageD/adress/editadress?content=' + content
				// });
			}
		}
	};
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="less" scoped>
	uni-page-body {
		height: 100%;
	}
	.all{
		height: 100%;
	}
	.adress_info {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.adress_info_name {
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;
			margin-bottom: 28upx;
			display: flex;
			align-items: center;

			text {
				font-size: 24upx;
				color: #333333;
			}

			image {
				width: 36upx;
				height: 36upx;
				margin-right: 10upx;
			}
		}

		.adress_info_detail {
			font-size: 28upx;
			line-height: 28upx;
			color: #333333;
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.icon {
				position: absolute;
				font-size: 28upx;
				color: #999999;
				right: 0;
				top: 0;
			}
		}
	}

	.address {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
		width: 100%;
		height: 100%;
	}

	.address-over {
		overflow-y: auto;
		flex: 1;
	}

	.no_adress_tips {
		width: 100%;
		text-align: center;
		overflow: hidden;

		image {
			display: block;
			width: 200upx;
			height: 198upx;
			margin: auto;
			margin-top: 80upx;
		}

		.no_adress_tips_tips {
			font-size: 24upx;
			color: #999999;
		}
	}

	.add_adress {
		height: 90upx;
		width: calc(100% - 60upx);
		margin: 50upx auto 70upx;
		position: relative;
		border-radius: 24upx;
		overflow: hidden;

		.add_adress_add {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			line-height: 90upx;
			font-size: 32upx;
			color: #ffffff;
			background: #FF2842;

			.icon {
				font-size: 30upx;
				color: #ffffff;
				margin-right: 10upx;
			}
		}
	}

	.addres {
		width: 100%;
		padding: 0 30upx;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.add_adress_info {
			width: 100%;
			padding: 30upx 0;
			box-sizing: border-box;
			border-bottom: 2upx solid #f9f9f9;
			position: relative;
			display: flex;
			align-items: center;

			.add_adress_info_vi {
				flex: 1;
			}

			.detail {
				width: 100%;
				font-size: 28upx;
				color: #333333;
				line-height: 48upx;
			}

			.name {
				margin: 16upx 0;
				font-size: 24upx;
				color: #666;
			}

			.default {
				padding: 4upx 22upx;
				box-sizing: border-box;
				display: inline-block;
				font-size: 24upx;
				background: linear-gradient(to right, #FF2842, #FF5E71);
				border-radius: 4px;
				color: #FFFFFF;
				margin-right: 20upx;
			}

			.text_name {
				color: #333333;
				font-size: 26upx;
				margin-right: 10upx;
			}

			.icon_edit {

				.icon {
					color: #999999;
				}
			}

			image {
				width: 32upx;
				height: 32upx;
			}
		}

		.add_adress_info:last-child {
			border-bottom: none;
		}
	}
</style>
